<div class="row">
    <div id="breadcrumb" class="col-md-12">
        <ol class="breadcrumb">
            <li><a href="#">yunPass管理</a></li>
            <li><a href="#">密钥导入</a></li>
        </ol>
    </div>
</div>
<div class="row">
    <div class="col-xs-12 col-sm-12">
        <div class="box">
            <div class="box-header">
                <div class="box-icons">
                    <a class="expand-link">
                        <i class="fa fa-expand"></i>
                    </a>
                </div>
                <div class="no-move"></div>
            </div>
            <div class="box-content">
                <div class="row">
                <div class="col-md-7">
                    <div>

                        <!-- Nav tabs -->
                        <ul class="nav nav-tabs" role="tablist">
                            <li role="presentation" class="active"><a href="#buildingSecret" aria-controls="buildingSecret"
                                                                      role="tab" data-toggle="tab">楼栋密钥</a></li>
                            <li role="presentation"><a href="#brakeSecret" aria-controls="brakeSecret" role="tab"
                                                       data-toggle="tab">道闸密钥</a></li>
                            <li role="presentation"><a href="#villageSecret" aria-controls="villageSecret" role="tab"
                                                       data-toggle="tab">园区密钥</a></li>
                        </ul>

                        <!-- Tab panes -->
                        <div class="tab-content">
                            <div role="tabpanel" class="tab-pane fade in active" id="buildingSecret">
                                <form class="form-horizontal" id="buildingSecretConfigForm">
                                    <div class="form-group">
                                        <div class="col-sm-8">
                                            <input type="hidden" name="type" value="1" class="form-control"
                                                   placeholder="">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-sm-2 control-label">选择园区</label>
                                        <div class="col-sm-3">
                                            <select class="form-control villageList" name="villageId">
                                                <option value="">--选择园区--</option>
                                            </select>
                                        </div>
                                        <label class="col-sm-2 control-label">选择楼栋</label>
                                        <div class="col-sm-3">
                                            <select class="form-control" name="controlId" id="buildingList">
                                            </select>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-sm-2 control-label">选择密钥</label>
                                        <div class="col-sm-8">
                                            <select class="form-control" name="secretId" id="secretList">
                                            </select>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <div class="col-sm-offset-2 col-sm-2">
                                            <button type="submit" class="btn btn-primary">确定</button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                            <div role="tabpanel" class="tab-pane fade" id="brakeSecret">
                                <form class="form-horizontal" id="brakeSecretConfigForm">
                                    <div class="form-group">
                                        <div class="col-sm-8">
                                            <input type="hidden" name="type" value="2" class="form-control"
                                                   placeholder="">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-sm-2 control-label">选择园区</label>
                                        <div class="col-sm-3">
                                            <select class="form-control villageList" name="villageId">
                                                <option value="">--选择园区--</option>
                                            </select>
                                        </div>
                                        <label class="col-sm-2 control-label">选择道闸</label>
                                        <div class="col-sm-3">
                                            <select class="form-control" name="controlId" id="brakeList">
                                            </select>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-sm-2 control-label">选择密钥</label>
                                        <div class="col-sm-8">
                                            <select class="form-control" name="secretId" id="secretList">
                                            </select>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <div class="col-sm-offset-2 col-sm-2">
                                            <button type="submit" class="btn btn-primary">确定</button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                            <div role="tabpanel" class="tab-pane fade" id="villageSecret">
                                <form class="form-horizontal" id="villageSecretConfigForm">
                                    <div class="form-group">
                                        <div class="col-sm-8">
                                            <input type="hidden" name="type" value="2" class="form-control"
                                                   placeholder="">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-sm-2 control-label">选择园区</label>
                                        <div class="col-sm-8">
                                            <select class="form-control villageList" name="villageId">
                                                <option value="">--选择园区--</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-sm-2 control-label">选择密钥</label>
                                        <div class="col-sm-8">
                                            <select class="form-control" name="secretId" id="secretList">
                                            </select>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <div class="col-sm-offset-2 col-sm-2">
                                            <button type="submit" class="btn btn-primary">确定</button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>

                    </div>

                </div>
                <div class="col-md-5">
                    <h3>批量导入</h3>
                    <form class="form-horizontal">
                        <div class="form-group">
                            <div class="col-sm-8">
                                <input type="file" name="file" placeholder="">
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-2">
                                <button type="button" class="btn btn-primary">上传</button>
                            </div>
                        </div>
                    </form>
                </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">

    $("#buildingSecretConfigForm .villageList").change(function(){
        var villageId=$("#buildingSecretConfigForm .villageList option:selected").val();
        $.ajax({
            type: "post",
            async: true,
            url: urlConfig.getBuildingSelect2+"/"+villageId,
            dataType: "json",
            success: function (result) {
                if (result.status) {
                    if(result.jsonString!=null)
                    {
                        var options="<option value=''>--请选择楼栋--</option>";
                        for(var i in result.jsonString)
                        {
                            options+="<option value='"+result.jsonString[i].id+"'>"+result.jsonString[i].text+"</option>";
                        }
                        $("#buildingList").html(options);
                    }
                    else
                    {
                        $("#buildingList").html("<option value=''>--没有相应的楼栋--</option>");
                    }
                }
                else
                {
                    alert(result.errorMsg.description);
                }
            },
            error: function () {
                alert("服务器连接失败,请重试!");
            }
        });
    });

    $("#brakeSecretConfigForm .villageList").change(function(){
        var villageId=$("#brakeSecretConfigForm .villageList option:selected").val();
        $.ajax({
            type: "post",
            async: true,
            url: urlConfig.getBrakeListByVillageID+"/"+villageId,
            dataType: "json",
            success: function (result) {
                if (result.status) {
                    if(result.jsonString!=null)
                    {
                        var options="<option value=''>--请选择道闸--</option>";
                        for(var i in result.jsonString)
                        {
                            options+="<option value='"+result.jsonString[i].id+"'>"+result.jsonString[i].text+"</option>";
                        }
                        $("#brakeList").html(options);
                    }
                    else
                    {
                        $("#brakeList").html("<option value=''>--没有相应的道闸--</option>");
                    }
                }
                else
                {
                    alert(result.errorMsg.description);
                }
            },
            error: function () {
                alert("服务器连接失败,请重试!");
            }
        });
    });


    //设置楼栋密钥
    function buildingSecretAddValidator() {
        $('#buildingSecretConfigForm').bootstrapValidator({
            message: '存在非法输入',
            fields: {
                villageId:{
                    validators: {
                        notEmpty: {
                            message: '请选择园区'
                        }
                    }
                },
                controlId:{
                    validators: {
                        notEmpty: {
                            message: '请选择楼栋'
                        }
                    }
                },
                secretId: {
                    validators: {
                        notEmpty: {
                            message: '请选择密钥'
                        }
                    }
                }
            }
        })
                .on("success.form.bv",function(e){
                    e.preventDefault();
                    submitBuildingSecretForm();
                });
    }
    function submitBuildingSecretForm()
    {
        var fields = $("#buildingSecretConfigForm").serializeArray();

        $.ajax({
            type: "post",
            async: false,
            url: urlConfig.addSecret,
            data: fields,
            dataType: "json", //返回数据形式为json
            success: function (result) {
                if (result.status) {
                    alert("添加成功");
                }
                else
                {
                    alert(result.errorMsg.description);
                }
            },
            error: function () {
                alert("服务器连接失败,请重试!");
            }
        });
    }


    //设置道闸密钥
    function brakeSecretAddValidator() {
        $('#brakeSecretConfigForm').bootstrapValidator({
            message: '存在非法输入',
            fields: {
                villageId:{
                    validators: {
                        notEmpty: {
                            message: '请选择园区'
                        }
                    }
                },
                controlId:{
                    validators: {
                        notEmpty: {
                            message: '请选择道闸'
                        }
                    }
                },
                secretId: {
                    validators: {
                        notEmpty: {
                            message: '请选择秘钥'
                        }
                    }
                }
            }
        })
                .on("success.form.bv",function(e){
                    e.preventDefault();
                    submitBuildingSecretForm();
                });
    }
    function submitBrakeSecretForm()
    {
        var fields = $("#brakeSecretConfigForm").serializeArray();

        $.ajax({
            type: "post",
            async: false,
            url: urlConfig.addSecret,
            data: fields,
            dataType: "json", //返回数据形式为json
            success: function (result) {
                if (result.status) {
                    alert("添加成功");
                }
                else
                {
                    alert(result.errorMsg.description);
                }
            },
            error: function () {
                alert("服务器连接失败,请重试!");
            }
        });
    }

    //设置园区密钥
    function villageSecretAddValidator() {
        $('#villageSecretConfigForm').bootstrapValidator({
            message: '存在非法输入',
            fields: {
                villageId:{
                    validators: {
                        notEmpty: {
                            message: '请选择园区'
                        }
                    }
                },
                secretId: {
                    validators: {
                        notEmpty: {
                            message: '请选择密钥'
                        }
                    }
                }
            }
        })
                .on("success.form.bv",function(e){
                    e.preventDefault();
                    submitVillageSecretForm();
                });
    }
    function submitVillageSecretForm()
    {
        var fields = $("#villageSecretConfigForm").serializeArray();

        $.ajax({
            type: "post",
            async: false,
            url: urlConfig.addSecret,
            data: fields,
            dataType: "json", //返回数据形式为json
            success: function (result) {
                if (result.status) {
                    alert("添加成功");
                }
                else
                {
                    alert(result.errorMsg.description);
                }
            },
            error: function () {
                alert("服务器连接失败,请重试!");
            }
        });
    }

    $(document).ready(function() {
        initVillageSelect();
        LoadBootstrapValidatorScript(buildingSecretAddValidator);
        LoadBootstrapValidatorScript(brakeSecretAddValidator);
        LoadBootstrapValidatorScript(villageSecretAddValidator);
    });
</script>
